import { Avatar as AntdAvatar, AvatarProps, Popover } from 'antd'
import { UserOutlined } from "@ant-design/icons";
import theme from "@/theme";

export default function Avatar(props: AvatarProps & {
  userName?: string;
  disableAvatarPopover?: boolean;
  showUserName?: boolean
  size?: number;
}) {
  const { userName, disableAvatarPopover, showUserName,size=32, ...restProps } = props;

  const content = <div className='flex flex-col items-center'>
    <AntdAvatar
      {...restProps}
      size={size}
      icon={restProps.icon ?? (restProps.src ? undefined : <UserOutlined />)}
      style={restProps.src ? restProps.style : {
        backgroundColor: '#F3EEE9',
        color: theme.primary,
        ...props.style,
      }}
    />
    {showUserName && <div className='text-[12px] text-[#999] truncate text-center' style={{width: size}}>
      {userName}  
    </div>}
  </div>;

  return (userName && !disableAvatarPopover) ? <Popover content={userName}>
    {content}
  </Popover> : content;
}
